<template>
  <div>
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">县分级经营分析报告</div>
      </div>
    </div>
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="账期">
          <el-date-picker
            v-model="form.month"
            value-format="yyyyMM"
            type="month"
            placeholder="选择月"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <AreaCascader :area_id.sync="form.areaId" :area_name.sync="areaName" @change="selectArea" />
        </el-form-item>
        <el-form-item label="区县类别">
          <el-input v-model="form.classLevel" disabled placeholder="请选择区域"></el-input>
          <!-- <el-select v-model="form.classLevel" :clearable="false">
            <el-option label="一类" value="一类"></el-option>
            <el-option label="二类" value="二类"></el-option>
            <el-option label="三类" value="三类"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="handle_search()"
            :loading="form.month === undefined"
            >查询</el-button
          >
          <el-button
            size="small"
            type="warning"
            @click="handle_export()"
            :loading="loading50 || loading51"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div id="pages" style="padding: 20px">
      <page-1 ref="page1" :form="form" />
      <page-2 ref="page2" :form="form" />
      <page-3 ref="page3" :form="form" :currentLvlName="currentLvlName" />
      <page-4 ref="page4" :form="form" :areaName="areaName" />
      <page-5 ref="page5" :form="form" />
      <page-6 ref="page6" :form="form" />

      <!-- 先删了 -->
      <!-- <page-7 ref="page7" :form="form"  /> -->

      <page10 ref="page10" :form="form" />
      <page11 ref="page11" :form="form" />
      <page12 ref="page12" :form="form" />
      <page13 ref="page13" :form="form" />
      <page14 ref="page14" :form="form" />
      <page15 ref="page15" :form="form" />
      <page16 ref="page16" :form="form" />
      <page17 ref="page17" :form="form" />
      <page18 ref="page18" :form="form" />
      <page19 ref="page19" :form="form" />
      <page20 ref="page20" :form="form" />
      <page21 ref="page21" :form="form" />
      <page22 ref="page22" :form="form" />
      <page23 ref="page23" :form="form" />
      <page24 ref="page24" :form="form" />
      <page25 ref="page25" :form="form" />
      <page26 ref="page26" :form="form" />
      <page27 ref="page27" :form="form" />
      <page28 ref="page28" :form="form" />
      <page29 ref="page29" :form="form" />
      <page30 ref="page30" :form="form" />
      <page31 ref="page31" :form="form" />
      <page33 ref="page33" :form="form" />
      <page34 ref="page34" :form="form" />
      <page35 ref="page35" :form="form" />
      <page36 ref="page36" :form="form" />
      <page37 ref="page37" :form="form" />
      <page38 ref="page38" :form="form" />
      <page40 ref="page40" :form="form" />
      <page42 ref="page42" :form="form" />
      <page43 ref="page43" :form="form" />
      <page44 ref="page44" :form="form" />
      <page45 ref="page45" :form="form" />
      <page46 ref="page46" :form="form" :currentLvlName="currentLvlName" />
      <page47 ref="page47" :form="form" />
      <page48 ref="page48" :form="form" />
      <page49 ref="page49" :form="form" />
      <page50 ref="page50" :form="form" :loading.sync="loading50" />
      <page51 ref="page51" :form="form" :loading.sync="loading51" />
    </div>
  </div>
</template>
<script>
// import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { $budgetAPI } from "@/api";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
// let accountInfo = JSON.parse(getSessionStorage('accountInfo'));
export default {
  components: {
    /* no表示没对接口 */
    /* page1-7对应page3-9 */
    page1: () => import("./components/page1.vue"),
    page2: () => import("./components/page2.vue"),
    page3: () => import("./components/page3.vue"),
    page4: () => import("./components/page4.vue"),
    page5: () => import("./components/page5.vue"),
    page6: () => import("./components/page6.vue"),
    // page7: () => import("./components/page7.vue"), //先删掉
    page10: () => import("./components/page10.vue"),
    page11: () => import("./components/page11.vue"),
    page12: () => import("./components/page12.vue"),
    page13: () => import("./components/page13.vue"), //移动新增
    page14: () => import("./components/page14.vue"), //移动净增
    page15: () => import("./components/page15.vue"),
    page16: () => import("./components/page16.vue"), //宽带新增
    page17: () => import("./components/page17.vue"), //宽带净增
    page18: () => import("./components/page18.vue"), //
    page19: () => import("./components/page19.vue"), //5g出账净增
    page20: () => import("./components/page20.vue"), //融合净增
    page21: () => import("./components/page21.vue"),
    page22: () => import("./components/page22.vue"), //天翼高清
    page23: () => import("./components/page23.vue"), //全屋wifi
    page24: () => import("./components/page24.vue"), //天翼看家
    page25: () => import("./components/page25.vue"), //
    page26: () => import("./components/page26.vue"), //
    page27: () => import("./components/page27.vue"), //
    page28: () => import("./components/page28.vue"), //
    page29: () => import("./components/page29.vue"), //
    page30: () => import("./components/page30.vue"), //
    page31: () => import("./components/page31.vue"), //

    page33: () => import("./components/page33.vue"),
    page34: () => import("./components/page34.vue"),
    page35: () => import("./components/page35.vue"),
    page36: () => import("./components/page36.vue"),
    page37: () => import("./components/page37.vue"),
    page38: () => import("./components/page38.vue"),
    page40: () => import("./components/page40.vue"), //40、41
    page42: () => import("./components/page42.vue"),
    page43: () => import("./components/page43.vue"),
    page44: () => import("./components/page44.vue"),
    page45: () => import("./components/page45.vue"),
    page46: () => import("./components/page46.vue"),
    page47: () => import("./components/page47.vue"),
    page48: () => import("./components/page48.vue"),
    page49: () => import("./components/page49.vue"),
    page50: () => import("./components/page50.vue"), //page50-52
    page51: () => import("./components/page51.vue"), // page53-54

    AreaCascader: () => import("./components/areaCascader/areaCascader.vue"),
  },
  data() {
    return {
      form: {
        areaId: null,
        month: undefined,
        classLevel: "",
        token: getCookie("token"),
      },
      areaName: "",
      currentLvlName: "",
      loading50: false,
      loading51: false,
      // lazyLoad: new Array(50).fill(false),
      // lazyIndex: 15,
      // app: null,
    };
  },
  created() {
    this.getMonth();
    // this.app =  document.querySelector("#app");
    // this.app.addEventListener("scroll", this.handle_scroll);
  },
  beforeDestroy() {
    // if(this.app != null){
    // this.app.removeEventListener("scroll", this.handle_scroll);
    // }
  },
  methods: {
    getMonth() {
      $budgetAPI.getCountyOperationMaxMonth({}, (res) => {
        if (res.code == 0) {
          this.form.month = res.content;
        }
      });
    },
    handle_search() {
      this.loading50 = true;
      this.loading51 = true;
      for (let ref in this.$refs) {
        this.$refs[ref].getData && this.$refs[ref].getData();
      }
    },
    handle_scroll() {
      if (this.lazyIndex >= this.lazyLoad.length) {
        this.app.removeEventListener("scroll", this.handle_scroll);
        this.app = null;
        return;
      }
      const { app } = this;
      if (
        app.scrollTop + app.clientHeight >= app.scrollHeight - 10 &&
        this.lazyIndex < this.lazyLoad.length
      ) {
        this.lazyLoad.splice(this.lazyIndex, 1, true);
        this.lazyIndex++;
      }
    },
    handle_export() {
      const loading = this.$loading({
        lock: true,
        text: "导出中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let shareContent = document.getElementById("pages"), //需要截图的包裹的（原生的）DOM 对象
          width = shareContent.clientWidth, //获取dom 宽度
          height = shareContent.clientHeight, //获取dom 高度
          canvas = document.createElement("canvas"), //创建一个canvas节点
          scale = 1; //定义任意放大倍数 支持小数
          canvas.width = width * scale; //定义canvas 宽度 * 缩放
          canvas.height = height * scale; //定义canvas高度 *缩放
          canvas.style.width = shareContent.clientWidth * scale + "px";
          canvas.style.height = shareContent.clientHeight * scale + "px";
          canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      let opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true, // 【重要】开启跨域配置
      };
      html2Canvas(shareContent, opts)
        .then(() => {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          //一页pdf显示html页面生成的canvas高度;
          var pageHeight = (contentWidth / 592.28) * 841.89;
          //未生成pdf的html页面高度
          var leftHeight = contentHeight;
          //页面偏移
          var position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 595.28;
          var imgHeight = (592.28 / contentWidth) * contentHeight;
          var pageData = canvas.toDataURL("image/jpeg", 1.0);
          var PDF = new JsPDF("", "pt", "a4");
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              if (leftHeight > 0) {
                PDF.addPage();
              }
            }
          }
          PDF.save("县分级经营分析报告.pdf");
        })
        .finally(() => {
          loading.close();
        });
    },
    selectArea(areaId){
      $budgetAPI.getCountyOperationCategory(
        { areaId },
        res => {
          this.form.classLevel = res.content;
        },
        err => {

        }
      )
    }
  },
};
</script>